<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chef AI - Convex平台的AI开发助手</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            scroll-behavior: smooth;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(90deg, #4f46e5, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-box {
            position: relative;
        }
        .highlight-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: -4px;
            height: 100%;
            width: 4px;
            background: linear-gradient(to bottom, #4f46e5, #8b5cf6);
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-indigo-50 to-purple-50 py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-12 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 serif">
                        开发者的<span class="gradient-text">智能助手</span>
                    </h1>
                    <p class="text-xl text-slate-600 mb-8 max-w-lg leading-relaxed">
                        Chef AI 是 Convex 平台推出的 AI 助手工具，专为开发者设计，旨在简化和加速应用程序开发过程。它能理解你的代码库并协助完成各种开发任务。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://chef.convex.dev/" target="_blank" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center">
                            <i class="fas fa-external-link-alt mr-2"></i> 访问官网
                        </a>
                        <a href="#features" class="px-8 py-4 bg-white text-indigo-600 font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center">
                            <i class="fas fa-search mr-2"></i> 探索功能
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full opacity-30"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-indigo-200 rounded-full opacity-30"></div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1749397644241-b84fd6dd-941a-429a-965a-1d043f270d86.png" 
                             alt="Chef AI界面截图" 
                             class="relative z-10 rounded-xl shadow-2xl border-4 border-white">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Overview -->
    <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif">核心功能 <span class="text-indigo-600">一览</span></h2>
                <p class="text-slate-600 max-w-3xl mx-auto text-lg">Chef AI 为开发者提供全方位的智能辅助，让编码变得更高效、更愉悦</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-indigo-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-code text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">代码理解与生成</h3>
                    <p class="text-slate-600">理解整个代码库，根据上下文生成高质量的代码片段和完整功能，减少重复劳动。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-purple-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-comments text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">自然语言交互</h3>
                    <p class="text-slate-600">通过对话式指令实现功能、修复错误或解释代码逻辑，让开发更直观。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-layer-group text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">全栈开发支持</h3>
                    <p class="text-slate-600">从前端到后端，提供全面辅助，特别优化对Convex数据库和函数的支持。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-green-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-bug text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">智能调试</h3>
                    <p class="text-slate-600">识别代码问题并提供解决方案，大幅减少排查错误的时间。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-yellow-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-file-alt text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">文档生成</h3>
                    <p class="text-slate-600">自动为代码和API生成清晰文档，保持项目文档与代码同步。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 card-hover">
                    <div class="w-16 h-16 bg-pink-50 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-users text-pink-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 serif">实时协作</h3>
                    <p class="text-slate-600">在开发过程中随时提供建议和帮助，像一位随时待命的专业同事。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-indigo-50 to-purple-50">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif">Chef AI <span class="text-indigo-600">工作流程</span></h2>
                <p class="text-slate-600 max-w-3xl mx-auto text-lg">通过交互式图表了解 Chef AI 如何与开发者协作</p>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-lg">
                <div class="mermaid">
                    graph TD
                    A[开发者输入需求] --> B[自然语言理解]
                    B --> C[代码库分析]
                    C --> D[生成解决方案]
                    D --> E[代码建议/生成]
                    E --> F[开发者审查]
                    F -->|接受| G[集成到项目]
                    F -->|修改| H[反馈循环]
                    H --> D
                    G --> I[项目更新]
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif">典型<span class="text-purple-600">使用场景</span></h2>
                <p class="text-slate-600 max-w-3xl mx-auto text-lg">探索 Chef AI 如何在不同开发场景中提升你的效率</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="relative bg-gradient-to-br from-indigo-50 to-purple-50 p-8 rounded-xl shadow-lg highlight-box">
                    <div class="absolute top-6 right-6 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md">
                        <i class="fas fa-bolt text-indigo-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 serif">快速原型开发</h3>
                    <p class="text-slate-700 mb-4">在几分钟内搭建功能完整的应用原型，无需从零开始编写所有代码，快速验证你的创意。</p>
                    <div class="bg-white px-4 py-2 rounded-lg inline-block">
                        <p class="text-sm font-mono text-indigo-600">"创建一个用户登录功能"</p>
                    </div>
                </div>
                
                <div class="relative bg-gradient-to-br from-blue-50 to-cyan-50 p-8 rounded-xl shadow-lg highlight-box">
                    <div class="absolute top-6 right-6 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md">
                        <i class="fas fa-graduation-cap text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 serif">学习 Convex 平台</h3>
                    <p class="text-slate-700 mb-4">新手开发者通过交互式学习快速掌握 Convex 平台的特性和最佳实践，缩短学习曲线。</p>
                    <div class="bg-white px-4 py-2 rounded-lg inline-block">
                        <p class="text-sm font-mono text-blue-600">"如何优化Convex查询性能？"</p>
                    </div>
                </div>
                
                <div class="relative bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl shadow-lg highlight-box">
                    <div class="absolute top-6 right-6 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md">
                        <i class="fas fa-cogs text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 serif">复杂功能实现</h3>
                    <p class="text-slate-700 mb-4">面对不熟悉的技术领域时，获取代码示例和实现思路，避免重复造轮子。</p>
                    <div class="bg-white px-4 py-2 rounded-lg inline-block">
                        <p class="text-sm font-mono text-purple-600">"实现实时聊天功能"</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-900 to-gray-800 text-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif">五分钟<span class="text-indigo-300">快速上手</span></h2>
                <p class="text-gray-300 max-w-3xl mx-auto text-lg">立即开始体验 Chef AI 的强大功能</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                <div class="md:col-span-1 flex flex-col items-center">
                    <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-2xl font-bold mb-4">1</div>
                    <h3 class="text-lg font-semibold mb-2 text-center">注册账号</h3>
                    <p class="text-gray-300 text-sm text-center">创建或登录Convex账户</p>
                </div>
                
                <div class="md:col-span-1 flex flex-col items-center">
                    <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-2xl font-bold mb-4">2</div>
                    <h3 class="text-lg font-semibold mb-2 text-center">安装工具</h3>
                    <p class="text-gray-300 text-sm text-center">安装Convex CLI工具</p>
                </div>
                
                <div class="md:col-span-1 flex flex-col items-center">
                    <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-2xl font-bold mb-4">3</div>
                    <h3 class="text-lg font-semibold mb-2 text-center">启动环境</h3>
                    <p class="text-gray-300 text-sm text-center">使用命令启动开发环境</p>
                </div>
                
                <div class="md:col-span-1 flex flex-col items-center">
                    <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-2xl font-bold mb-4">4</div>
                    <h3 class="text-lg font-semibold mb-2 text-center">访问AI</h3>
                    <p class="text-gray-300 text-sm text-center">在开发界面找到Chef AI</p>
                </div>
                
                <div class="md:col-span-1 flex flex-col items-center">
                    <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-2xl font-bold mb-4">5</div>
                    <h3 class="text-lg font-semibold mb-2 text-center">开始对话</h3>
                    <p class="text-gray-300 text-sm text-center">描述你的开发需求</p>
                </div>
            </div>
            
            <div class="mt-12 bg-gray-800 rounded-xl p-6 md:p-8 max-w-4xl mx-auto">
                <div class="flex items-start">
                    <div class="bg-indigo-600 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fas fa-terminal text-white"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-bold mb-2">示例命令</h4>
                        <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                            <code class="text-green-400 font-mono">
                                npx convex dev<br>
                                # 在出现的界面中:<br>
                                > 创建一个用户注册功能，包含邮箱验证
                            </code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Unique Features -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif">独特<span class="text-purple-600">优势</span>与特色</h2>
                <p class="text-slate-600 max-w-3xl mx-auto text-lg">为什么开发者选择 Chef AI 作为他们的编码伙伴</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0 bg-indigo-50 w-16 h-16 rounded-xl flex items-center justify-center">
                        <i class="fas fa-puzzle-piece text-indigo-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-3 serif">深度集成 Convex 生态</h3>
                        <p class="text-slate-600">与 Convex 平台无缝集成，对其数据模型、函数和查询有深入理解，提供精准的开发建议和代码生成。</p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0 bg-purple-50 w-16 h-16 rounded-xl flex items-center justify-center">
                        <i class="fas fa-brain text-purple-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-3 serif">上下文感知能力</h3>
                        <p class="text-slate-600">不同于通用AI工具，Chef AI能理解整个项目结构和代码关系，提供符合项目上下文的精准建议。</p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0 bg-blue-50 w-16 h-16 rounded-xl flex items-center justify-center">
                        <i class="fas fa-sync-alt text-blue-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-3 serif">持续学习进化</h3>
                        <p class="text-slate-600">随着Convex平台的更新，Chef AI也在不断进化，掌握最新的开发实践和技术趋势。</p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0 bg-green-50 w-16 h-16 rounded-xl flex items-center justify-center">
                        <i class="fas fa-wallet text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-3 serif">低成本高价值</h3>
                        <p class="text-slate-600">公开测试阶段免费使用，未来高级功能也保持合理定价，为开发者提供超高性价比的AI辅助工具。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis',
            },
            securityLevel: 'loose'
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>